<template>
  <div class="personal-center">
    <!-- 用户信息卡片 -->
    <el-card class="user-card">
      <div class="user-info">
        <el-avatar
            :size="80"
            :src="userInfo?.avatar"
        >
          <el-icon><UserFilled /></el-icon>
        </el-avatar>
        <div class="user-details">
          <h2>{{ userInfo.customerName || userInfo.loginAccount }}</h2>
          <div class="user-tags">
            <el-tag size="small">ID: {{ userInfo.phoneNumber }}</el-tag>
            <el-tag size="small" type="warning">{{ userInfo.accountLevel }}</el-tag>
            <el-tag size="small" :type="userInfo.realNameVerification === '已认证' ? 'success' : 'info'">
              {{ userInfo.realNameVerification || '未认证' }}
            </el-tag>
          </div>
        </div>
      </div>

      <!-- 账户信息 -->
      <el-row class="account-info">
        <el-col :span="8">
          <div class="info-item">
            <div class="amount">¥ {{ userInfo.balance || '0.00' }}</div>
            <div class="label">账户余额</div>
            <el-button type="danger" size="small" round @click="handleMenuClick({path: '/recharge'})">充值</el-button>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <div class="amount">{{ userInfo.hasChargingCard ? '已开通' : '未开通' }}</div>
            <div class="label">充电卡</div>
            <el-button type="primary" size="small" round @click="handleMenuClick({path: '/charging-card'})">
              {{ userInfo.hasChargingCard ? '查看' : '办理' }}
            </el-button>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <div class="amount">{{ userInfo.points || 0 }}</div>
            <div class="label">积分</div>
            <el-button type="success" size="small" round @click="handleMenuClick({path: '/points'})">兑换</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 功能菜单 -->
    <el-card class="menu-card">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item, index) in getFilteredMenuItems" :key="index">
          <div class="menu-item" @click="handleMenuClick(item)">
            <el-icon :class="item.iconColor">
              <component :is="item.icon"/>
            </el-icon>
            <span>{{ item.label }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import {computed, onMounted, ref} from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'

import {
  Star,
  Document,
  Van,
  CreditCard,
  Present,
  User,
  Connection,
  TrendCharts,
  PieChart,
  Service,
  Message,
  Setting,
  UserFilled
} from '@element-plus/icons-vue'

const router = useRouter()

const userInfo = ref({
  id: '',
  loginAccount: '',
  customerName: '',
  phoneNumber: '',
  isinvestor: 0,
  points: 0,
  hasChargingCard: 0,
  accountLevel: '',
  realNameVerification: '',
  balance: 0,
  gender: '',
  address: '',
  idCard: '',
  avatar: ''
})
// 添加获取用户信息的方法
const fetchUserInfo = async () => {
  try {
    const response = await axios.get('/api/customers/info', {
      headers: {
        'Authorization': localStorage.getItem('token')
      }
    })
    if (response.data) {
      userInfo.value = {
        ...response.data,
        avatar: response.data.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
      }
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

// 根据用户权限过滤菜单项
const getFilteredMenuItems = computed(() => {
  const items = [
    { label: '我的收藏', icon: Star, iconColor: 'text-orange', path: '/collection' },
    { label: '我的订单', icon: Document, iconColor: 'text-green', path: '/orders' },
    { label: '我的车辆', icon: Van, iconColor: 'text-red', path: '/vehicles' },
    { label: '我的积分', icon: CreditCard, iconColor: 'text-blue', path: '/points' },
    { label: '我的礼券', icon: Present, iconColor: 'text-red', path: '/coupon' },
    { label: '我的组团', icon: User, iconColor: 'text-purple', path: '/groups' },
    { label: '我的桩站', icon: Connection, iconColor: 'text-blue', path: '/' },
    { label: '我的收益', icon: PieChart, iconColor: 'text-green', path: '/earnings' },
    { label: '我的客服', icon: Service, iconColor: 'text-blue', path: '/service' },
    { label: '我的邀请', icon: Message, iconColor: 'text-red', path: '/invitations' },
    { label: '我的设置', icon: Setting, iconColor: 'text-gray', path: '/settings' }
  ]

  // 如果是投资商，添加投资相关菜单
  if (userInfo.value.isinvestor === 1) {
    items.splice(7, 0, { label: '我的投资', icon: TrendCharts, iconColor: 'text-brown', path: '/I' })
  }

  return items
})
// 在组件挂载时获取用户信息
onMounted(() => {
  fetchUserInfo()
})
// 处理菜单点击
const handleMenuClick = (item) => {
  router.push(item.path)
}
</script>

<style scoped>
.personal-center {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

.user-card {
  margin-bottom: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
}

.user-details {
  flex: 1;
}

.user-details h2 {
  margin: 0 0 10px 0;
  font-size: 24px;
}

.user-tags {
  display: flex;
  gap: 10px;
}

.account-info {
  margin-top: 20px;
  text-align: center;
  padding: 20px 0;
  border-top: 1px solid #eee;
}

.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.amount {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.label {
  color: #909399;
  font-size: 14px;
}

.menu-card {
  margin-top: 20px;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 8px;
}

.menu-item:hover {
  background-color: #f5f7fa;
}

.menu-item .el-icon {
  font-size: 24px;
}

/* 图标颜色 */
.text-orange { color: #ff9900; }
.text-green { color: #67c23a; }
.text-red { color: #f56c6c; }
.text-blue { color: #409eff; }
.text-purple { color: #9c27b0; }
.text-brown { color: #795548; }
.text-gray { color: #909399; }
</style>